<!--我的页面-->
<template>
  <div class="my">
    <head-top head-title="我的"></head-top>
    <div class="myMain">
      <div class="Main">
        <img
          src="http://wx.qlogo.cn/mmopen/WoVledJQZcYtrP5p1dgNhGx0ydKxFR93WHncJKDfZkRhibRNicSoClDepzMOIDiaiahprbichBSeiahdicpNiboSdcUIia9BicKiaibIbiaPg/0"
          alt="头像">
        <p>{{myName}}</p>
      </div>
    </div>
    <div class="MyBox">
      <div class="myOrder" @click="order">
        <div class="Order">
          <i class="iconfont icon-74wodedingdan"></i>
          <p>我的订单</p>
        </div>
      </div>

      <div class="myCollection" @click="author">
        <div class="Order">
          <i class="iconfont icon-zuozhe"></i>
          <p>联系我</p>
        </div>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import footer from './footer.vue'
  import headTop from './header.vue'
  export default {
    name: "my",
    data() {
      return {
        // lists:[]
        my: "我的",
        myName: "Lucky"
      }
    },
    components:{
      "v-footer":footer,
      headTop
    },
    methods: {
      order() {
        this.$router.push('/order')
      },
      author() {
        this.$router.push('/author')
      }
    }
  }
</script>


<style>
  .myMain {
    height: 100%;
    background: white;
    margin-top: 1.3rem;
    width: 100%;

  }

  .MyBox {
    width: 100%;
    height: 110px;
    background: white;
  }

  .myOrder, .myCollection {
    height: 50%;
  }

  .Main, .Order {
    height: 100%;
    /* background: red; */
    margin-left: 10px;
    border-bottom: 1px solid #cccccc;
  }

  .myMain img {
    display: block;
    width: 60px;
    height: 60px;
    padding: 7px;
    float: left;
  }

  .myMain p {
    line-height: 75px;
  }

  .Order i, .Order p {
    display: block;
    line-height: 55px;
    float: left;
    padding-left: 10px;
  }
</style>
